<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>test</title>
    <script src="vue.min.js"></script>
    <script src="moment.min.js"></script>
    <style>
        table {
            border-collapse: collapse
        }

        table td {
            border: 1px solid black
        }
    </style>
</head>

<body>
    <div id=app>
        <div>
            <button @click="loadCity()">导入城市数据</button>
            {{cityed?"已导入":"未导入"}}
        </div>
        <div>
            <button @click="loadMode()">导入mode数据</button>
            {{moded?"已导入":"未导入"}}
        </div>
        <div>
            <button @click="loadDealList">导入处理列表</button>
            处理路线:{{dealList.length}}条
        </div>
        <div v-if="cityed">
            <button v-if="!winId" @click="openSearchWindow">打开搜索页面</button>
            <button v-if="!winId" @click="clearStorage">清空缓存</button>
        </div>
        <div v-if="isProcess">
            <button @click="done">直接报告</button>
        </div>
        <div v-if="cityed&&dealList.length>0">
            <div>
                处理进度：第{{index+1}}条路线，第{{route_index+1}}个时间，第{{detail_index+1}}港口
                <button v-if="!auto&&winId" @click="goon">继续自动获取</button>
                <button v-if="auto" @click="auto=false">暂停自动获取</button>
            </div>
            <button v-if="!loading&&winId" @click="autoRun">自动获取所有</button>
            <div v-if="!loading">
                开始流水号：
                <input type="text" v-model="beginFlow">
            </div>
            <button v-if="!loading" @click="dealingList">导出excel</button>
            <table>
                <tbody>
                    <template v-for="(deal,deal_index) in dealList">
                        <template v-for="(route,route_index) in deal.routes">
                            <template v-for="(detail,detail_index) in route.details">
                                <tr>
                                    <td v-if="route_index==0&&detail_index==0" :rowspan="countDealRows(deal)">
                                        <div>{{deal.from}} to {{deal.to}}</div>
                                    </td>
                                    <td v-if="detail_index==0" :rowspan="route.details.length">
                                        <div>NO.{{route_index}}</div>
                                    </td>
                                    <td v-for="td in detail.tr">
                                        {{td}}
                                    </td>
                                    <td>{{detail.fcl}}</td>
                                </tr>
                            </template>
                        </template>
                    </template>
                </tbody>
            </table>
            <div style="width:100%;overflow: auto;"></div>
            <table>
                <tbody>
                    <tr v-for="tr in exportList">
                        <td v-for="td in tr">{{td}}</td>
                    </tr>
                </tbody>
            </table>
            <input type="checkbox" v-model="showManal">手动处理
            <ul v-if="showManal">
                <li v-for="(deal,deal_index) in dealList">
                    <div>{{deal_index}}</div>
                    <div>{{deal.from}} to {{deal.to}}</div>
                    <button v-if="!loading&&winId" @click="getRoute(deal_index)">手动获取路线</button>
                    <ul>
                        <li v-for="(route,route_index) in deal.routes">
                            <span>NO.{{route_index}}</span>
                            <button v-if="!loading&&winId" @click="getDetail(deal_index,route_index)">手动获取路线详情</button>
                            <div>
                                <ul>
                                    <li v-for="(detail,detail_index) in route.details">
                                        <span v-for="td in detail.tr" v-html="td"></span>
                                        <button v-if="!loading&&winId" @click="getVessel(deal_index,route_index,detail_index)">手动获取FCL</button>
                                        <div>fcl:{{detail.fcl}}</div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                auto: false,
                cityed: false,
                moded: false,
                showManal: false,
                blocked: false,
                isProcess: false,
                winId: "",
                SCAC: "HLCU",
                dealList: [],
                beginFlow: 1,
                cityNameCode: {

                },
                cityCodeName: {

                },
                cityCodePort: {

                },
                cityCodeCity: {

                },
                mode: {

                },
                loading: false,
                index: 0,
                route_index: 0,
                detail_index: 0,
                exportList: []
            },
            methods: {
                countDealRows(deal) {
                    return deal.routes.reduce((total, route) => {
                        return total + route.details.length
                    }, 0)
                },
                getRoute(index) {
                    this.loading = true
                    if (this.auto) {
                        if (this.dealList.length <= index) {
                            this.done()
                            return
                        }
                    }
                    this.index = index
                    window.savePage(this.winId, "getRoute", {
                        from: this.dealList[index].from,
                        fromName: this.cityCodeName[this.dealList[index].from.toUpperCase()],
                        fromCH: this.dealList[index].fromCH,
                        to: this.dealList[index].to,
                        toName: this.cityCodeName[this.dealList[index].to.toUpperCase()],
                        toCH: this.dealList[index].toCH,
                        date: moment(this.dealList[index].date).format("YYYY-MM-DD"),
                        index: index
                    })
                    // require('electron').remote.BrowserWindow.fromId(this.winId).webContents.send("get-route", {
                    //     from: this.dealList[index].from,
                    //     fromName: this.cityCodeName[this.dealList[index].from.toUpperCase()],
                    //     fromCH: this.dealList[index].fromCH,
                    //     to: this.dealList[index].to,
                    //     toName: this.cityCodeName[this.dealList[index].to.toUpperCase()],
                    //     toCH: this.dealList[index].toCH,
                    //     index: index
                    // })
                },
                getDetail(index, route_index) {
                    this.loading = true
                    if (this.auto) {
                        if (this.dealList[index].routes.length <= route_index) {
                            this.route_index = 0
                            this.getRoute(index + 1)
                            return
                        }
                    }

                    this.route_index = route_index
                    window.savePage(this.winId, "getDetail", {
                        from: this.dealList[index].from,
                        fromName: this.cityCodeName[this.dealList[index].from.toUpperCase()],
                        fromCH: this.dealList[index].fromCH,
                        to: this.dealList[index].to,
                        toName: this.cityCodeName[this.dealList[index].to.toUpperCase()],
                        toCH: this.dealList[index].toCH,
                        date: moment(this.dealList[index].date).format("YYYY-MM-DD"),
                        index: index,
                        route_index: route_index
                    })
                    // require('electron').remote.BrowserWindow.fromId(this.winId).webContents.send("get-detail", {
                    //     from: this.dealList[index].from,
                    //     fromName: this.cityCodeName[this.dealList[index].from.toUpperCase()],
                    //     fromCH: this.dealList[index].fromCH,
                    //     to: this.dealList[index].to,
                    //     toName: this.cityCodeName[this.dealList[index].to.toUpperCase()],
                    //     toCH: this.dealList[index].toCH,
                    //     index: index,
                    //     route_index: route_index
                    // })
                },
                getVessel(index, route_index, detail_index) {
                    this.loading = true
                    if (this.auto) {
                        if (this.dealList[index].routes[route_index].details.length > detail_index) {
                            let end = true
                            for (let i = detail_index; i < this.dealList[index].routes[route_index].details.length; i++) {
                                if (this.dealList[index].routes[route_index].details[i].tr[5]) {
                                    end = false
                                    detail_index = i
                                    break;
                                }
                            }
                            if (end) {
                                this.detail_index = 0
                                this.getDetail(index, route_index + 1)
                                return
                            }
                        }
                        else {
                            this.detail_index = 0
                            this.getDetail(index, route_index + 1)
                            return
                        }
                    }

                    this.detail_index = detail_index

                    window.savePage(this.winId, "getVessel", {
                        from: this.dealList[index].from,
                        fromName: this.cityCodeName[this.dealList[index].from.toUpperCase()],
                        fromCH: this.dealList[index].fromCH,
                        to: this.dealList[index].to,
                        toName: this.cityCodeName[this.dealList[index].to.toUpperCase()],
                        toCH: this.dealList[index].toCH,
                        date: moment(this.dealList[index].date).format("YYYY-MM-DD"),
                        index: index,
                        route_index: route_index,
                        detail_index: detail_index
                    })
                    // require('electron').remote.BrowserWindow.fromId(this.winId).webContents.send("get-vessel", {
                    //     from: this.dealList[index].from,
                    //     fromName: this.cityCodeName[this.dealList[index].from.toUpperCase()],
                    //     fromCH: this.dealList[index].fromCH,
                    //     to: this.dealList[index].to,
                    //     toName: this.cityCodeName[this.dealList[index].to.toUpperCase()],
                    //     toCH: this.dealList[index].toCH,
                    //     index: index,
                    //     route_index: route_index,
                    //     detail_index: detail_index
                    // })
                },
                autoRun() {
                    this.auto = true
                    this.loading = true
                    this.getRoute(0)
                },
                dealingList() {
                    let list = []
                    let mark = this.SCAC + moment(new Date()).format("YYYYMMDD") + "_"
                    let dealIndex = this.beginFlow

                    list.push([
                        "ROUTE_ID",
                        "Carrier SCAC",
                        "SI Cutoff",
                        "POR Port ID",
                        "POR City ID",
                        "POR Unlocode",
                        "POR",
                        "POR Facility Code",
                        "POR Facility Name",
                        "POR ETD",
                        "POR ATD",
                        "FND Port ID",
                        "FND City ID",
                        "FND Unlocode",
                        "FND",
                        "FND Facility Code",
                        "FND Facility Name",
                        "FND ETA",
                        "FND ATA",
                        "Transit time",
                        "Export Haulage",
                        "Import Haulage",
                        "Leg_Seq",
                        "Transport Mode",
                        "CY Cutoff",
                        "POL Unlocode",
                        "POL",
                        "POL Facility Code",
                        "POL Facility Name",
                        "POL ETD",
                        "POL ATD",
                        "POD Unlocode",
                        "POD",
                        "POD Facility Code",
                        "POD Facility Name",
                        "POD ETA",
                        "POD ATA",
                        "Service Code",
                        "Service Name ",
                        "Vessel Name",
                        "Voyage Number",
                        "Direction",
                    ])

                    this.dealList.forEach(deal => {
                        deal.routes.forEach(route => {
                            for (let i = 0; i < route.details.length - 1; i++) {
                                list.push([
                                    mark + this.getNum(dealIndex),
                                    this.SCAC,
                                    "",
                                    this.cityCodePort[deal.from.toUpperCase()],//出发portid
                                    this.cityCodeCity[deal.from.toUpperCase()],//出发cityid
                                    deal.from,//出发code
                                    this.cityCodeName[deal.from.toUpperCase()],//出发name
                                    "",
                                    "",
                                    route.details[0].tr[3] ? moment(route.details[0].tr[3]).format("MM/DD/YYYY HH:mm:ss") : "",//出发时间
                                    "",
                                    this.cityCodePort[deal.to.toUpperCase()],//到达portid
                                    this.cityCodeCity[deal.to.toUpperCase()],//到达cityid
                                    deal.to,//到达code
                                    this.cityCodeName[deal.to.toUpperCase()],//到达name
                                    "",
                                    "",
                                    route.details[route.details.length - 1].tr[2] ? moment(route.details[route.details.length - 1].tr[2]).format("MM/DD/YYYY HH:mm:ss") : "",//到达时间
                                    "",
                                    "",
                                    "",
                                    "",
                                    i + 1,//路线序号
                                    route.details[i].tr[5] ? "VESSEL" : (this.mode[route.details[i].tr[4]] ? this.mode[route.details[i].tr[4]] : route.details[i].tr[4]),//vessel mode
                                    route.details[i].fcl ? moment(route.details[i].fcl).format("MM/DD/YYYY HH:mm:ss") : "",//fcl
                                    this.cityNameCode[route.details[i].tr[1].toUpperCase()],//中间出发code
                                    route.details[i].tr[1],//中间出发name
                                    "",
                                    "",
                                    route.details[i].tr[3] ? moment(route.details[i].tr[3]).format("MM/DD/YYYY HH:mm:ss") : "",//中间出发时间
                                    "",
                                    this.cityNameCode[route.details[i + 1].tr[1].toUpperCase()],//中间到达code
                                    route.details[i + 1].tr[1],//中间到达name
                                    "",
                                    "",
                                    route.details[i + 1].tr[2] ? moment(route.details[i + 1].tr[2]).format("MM/DD/YYYY HH:mm:ss") : "",//中间到达时间
                                    "",
                                    route.details[i].tr[6],//service
                                    "",
                                    route.details[i].tr[5] ? route.details[i].tr[4] : "",//vessel
                                    route.details[i].tr[5],//voyage
                                    ""
                                ])
                            }
                            dealIndex++
                        })
                    })
                    this.exportList = list
                    window.buildXLSX(list, "RouteSchedules")
                },
                getNum(num) {
                    let result = num.toString()
                    for (let i = 0; i < 4 - num.toString().length; i++) {
                        result = "0" + result
                    }
                    return result
                },
                loadCity(path) {
                    return window.getXLSX(path).then(data => {
                        data[0].data.forEach(row => {
                            this.cityNameCode[row[1].toUpperCase()] = row[0].toUpperCase()
                            this.cityCodeName[row[0].toUpperCase()] = row[1].toUpperCase()
                            this.cityCodePort[row[0].toUpperCase()] = row[2]
                            this.cityCodeCity[row[0].toUpperCase()] = row[3]
                        })
                        console.log(data)
                        this.cityed = true
                    })
                },
                loadMode(path) {
                    return window.getXLSX(path).then(data => {
                        data[0].data.forEach(row => {
                            this.mode[row[0]] = row[1]
                        })
                        console.log(data)
                        this.moded = true
                    })
                },
                loadDealList() {
                    return window.getXLSX().then(data => {
                        let list = []
                        data[0].data.slice(1).forEach(row => {
                            let row2 = row[2].split("/")

                            list.push({
                                from: row[0],
                                to: row[1],
                                fromCH: row2[0] == "D" ? 0 : 1,
                                toCH: row2[1] == "D" ? 0 : 1,
                                date: row[3] ? new Date(1900, 0, row[3] - 1) : new Date(),
                                routes: []
                            })
                        })
                        this.dealList = list
                        console.log(data)
                    })
                },
                openSearchWindow() {
                    let win = window.openSearchWindow()
                    this.winId = win.id
                    return win
                },
                goon() {
                    this.auto = true
                    if (this.dealList.length > this.index) {
                        if (this.dealList[this.index].routes.length > this.route_index) {
                            if (this.dealList[this.index].routes[this.route_index].details.length > this.detail_index) {
                                this.getVessel(this.index, this.route_index, this.detail_index)
                            }
                            else {
                                this.getDetail(this.index, this.route_index)
                            }
                        }
                        else {
                            this.getRoute(this.index)
                        }
                    }
                    else {
                        this.done()
                    }
                },
                clearStorage() {
                    return window.clearStorage()
                },
                listen() {
                    require('electron').ipcRenderer.on("get-route", (event, args) => {
                        this.index = args.index
                        this.route_index = this.detail_index = 0
                        console.log("get-route done")
                        console.log(args)
                        this.dealList[args.index].routes = args.list.map(o => {
                            return {
                                tr: o,
                                details: []
                            }
                        })
                        this.loading = false


                        if (this.auto) {
                            this.getDetail(args.index, 0)
                        }
                    })

                    require('electron').ipcRenderer.on("get-detail", (event, args) => {
                        this.route_index = args.route_index
                        this.detail_index = 0
                        console.log("get-detail done")
                        console.log(args)
                        this.dealList[args.index].routes[args.route_index].details = args.list.map(o => {
                            return {
                                tr: o,
                                fcl: ""
                            }
                        })
                        this.loading = false


                        if (this.auto) {
                            this.getVessel(args.index, args.route_index, 0)
                        }
                    })

                    require('electron').ipcRenderer.on("get-vessel", (event, args) => {
                        this.detail_index = args.detail_index
                        console.log("get-vessel done")
                        console.log(args)
                        this.dealList[args.index].routes[args.route_index].details[args.detail_index].fcl = args.fcl
                        this.loading = false

                        if (this.auto) {
                            this.getVessel(
                                args.index,
                                args.route_index,
                                args.detail_index + 1)
                        }
                    })

                    require('electron').ipcRenderer.on("child-close", () => {
                        if (this.blocked) {
                            let win = this.openSearchWindow()
                            this.winId = win.id

                            this.loading = true
                            this.auto = true
                            this.blocked = false
                            this.goon()
                        }
                        else {
                            this.loading = false
                            this.auto = false
                            this.winId = ""
                        }
                    })

                    require('electron').ipcRenderer.on("blocked", () => {
                        this.clearStorage().then(() => {
                            if (this.auto) {
                                this.blocked = true
                            }
                            require('electron').remote.BrowserWindow.fromId(this.winId).close()
                        })
                    })
                },
                done() {
                    this.auto = false
                    this.loading = false
                    this.index = 0
                    console.log("end")
                    if (this.isProcess) {
                        require('electron').ipcRenderer.send("report", {
                            list: this.dealList
                        })
                    }
                    else {
                        alert("完成")
                    }
                },
                processStart(args) {
                    Promise.all([this.loadCity(args.cityPath), this.loadMode(args.modePath)]).then(() => {
                        this.dealList = args.dealList
                        let win = this.openSearchWindow()
                        this.winId = win.id
                        this.loading = true
                        this.auto = true
                        this.blocked = false
                        this.isProcess = true
                        this.goon()
                    })
                }
            },
            mounted() {
                this.listen()

                let args = require("electron").remote.process.env.searchArgs
                if (args) {
                    args = JSON.parse(args)
                    this.processStart(args)
                }
            }
        })
    </script>
</body>

</html>